<template>
  <div id="detailTopo" ref="detailTopo" style="width: 100%; height: 600px" />
</template>
<script>
  import { Graph } from '@antv/x6'
  export default {
    props: {
      renderData: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        graph: null
      }
    },
    mounted() {
      this.createMap()
    },
    beforeDestroy() {
      this.graph.dispose()
    },
    methods: {
      createMap() {
        const viewBox = document.getElementById('detailTopo')
        this.viewX = viewBox.offsetWidth
        this.viewY = viewBox.offsetHeight
        this.graph = new Graph({
          container: viewBox,
          panning: true
        })
        console.log('this.renderData', this.renderData)
        this.graph.fromJSON(this.renderData)
      }
    }
  }
</script>
